<template>
    <el-form label-position="left" label-width="auto" class="mi-drawer-info">
        <el-form-item>
            <el-col :span="24">
                <el-input v-model="filterText"
                          style="width: 40%;margin-right: 5px"
                          @keyup.native="filterTextChange()"
                          placeholder="输入标签内容进行查询"/>
                <el-tooltip content="展开" placement="top-start">
                    <el-button @click="openAll" size="mini" type="info" plain icon="el-icon-arrow-down"/>
                </el-tooltip>
                <el-tooltip content="折叠" placement="top-start">
                    <el-button @click="closeAll" type="info" plain size="mini" icon="el-icon-arrow-up"/>
                </el-tooltip>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-tree
                    style="margin-top: 10px"
                    ref="hasMenus"
                    node-key="id"
                    :data="treeMenus"
                    :check-strictly="false"
                    :filter-node-method="filterNode">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <el-tag size="small">{{data.title}}</el-tag>
                        <el-tag size="small" class="let2">{{data.path}}</el-tag>
                    </span>
            </el-tree>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
    import {Component, Prop} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {isBlank, tree} from "@/core/utils/Utils";

    @Component({
        name: 'MenuTree',
        components: {},
    })
    export default class MenuTree extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) data!: any;
        @Prop({default: {}}) option!: any;

        get treeMenus() {
            return tree(this.menus);
        }

        //初始化
        async mounted() {
            this.selectMenus();
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        menus = [];

        selectMenus() {
            $http.post(API.sysMenuAll, {}).then((res: any) => {
                if (res.success) {
                    this.menus = res.data;
                }
            });
        }

        /**
         * 处理树
         */
        filterText = "";

        openAll() {
            for (let i = 0; i < (this.$refs.hasMenus as any).store._getAllNodes().length; i++) {
                (this.$refs.hasMenus as any).store._getAllNodes()[i].expanded = true;
            }
        }

        //菜单折叠
        closeAll() {
            for (let i = 0; i < (this.$refs.hasMenus as any).store._getAllNodes().length; i++) {
                (this.$refs.hasMenus as any).store._getAllNodes()[i].expanded = false;
            }
        }

        //文字筛选菜单
        filterTextChange() {
            (this.$refs.hasMenus as any).filter(this.filterText)
        }

        filterNode(value: any, data: any) {
            if (isBlank(value)) return true;
            let path = false;
            let redirect = false;
            let title = false;
            if (data.path) {
                path = data.path.indexOf(value) != -1
            }
            if (data.redirect) {
                redirect = data.redirect.indexOf(value) != -1
            }
            if (data.title) {
                title = data.title.indexOf(value) != -1
            }
            return path || redirect || title;
        }

    }
</script>

<style scoped type="scss">


    /*.demo-statistics-table-expand label {*/
    /*    font-size: 0;*/
    /*    width: 100px;*/
    /*    color: #99a9bf;*/
    /*}*/


    /*.block .timeline {*/
    /*    padding-left: 0px;*/
    /*    margin-top: 40px;*/
    /*}*/

    /*.demo-drawer__footer {*/
    /*    margin: 20px 20px 0 20px;*/
    /*    text-align: center;*/
    /*}*/

    /*.demo-drawer__footer button {*/
    /*    width: 100%;*/
    /*}*/
</style>
